<template>
  <div class="wave-wrap">
    <div class="wave-box-outer-bd"
      ref="waveBoxOuterBd">
      <div class="wave-box-inner-bd"
        ref="waveBoxInnerBd">
        <div class="acens wave-value"
          ref="waveValue">
          <span>{{num}}</span>
          <span class="wave-unit">{{waveData.unit}}</span>
        </div>
        <div class="wave-bd"
          ref="waveBd">
          <div class="wave"
            style="widht:65px;height:130px;"
            ref="chart"></div>
        </div>
      </div>
    </div>
    <div class="wave-title-bg"
      ref="waveTitltBg">
      <div class="wave-name">{{waveData.name}}</div>
    </div>
  </div>
</template>
<script>
import 'echarts-liquidfill'
// https://cn.vuejs.org/v2/style-guide/#组件-实例的选项的顺序-推荐
export default {
  name: 'Wave',
  components: {},
  model: {},
  props: {
    waveData: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      chart: {},
      option: {},
      num: 0
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {
    this.initOption()
  },
  beforeDestroy() {},
  methods: {
    init() {
      this.chart&&this.chart.clear()
      let _this = this
      let tl = new TimelineMax({})
      let tw1 = TweenMax.to(this.$refs.waveBoxOuterBd, 0.5, {
        opacity: 1,
        scaleY: 1
      })
      let tw2 = TweenMax.to(this.$refs.waveBoxInnerBd, 0.5, {
        opacity: 1,
        scaleY: 1
      })
      let tw3 = TweenMax.to(this.$refs.waveValue, 0.5, {
        opacity: 1,
        scaleX: 1
      })
      let tw4 = TweenMax.to(this.$refs.waveBd, 0.3, { opacity: 1 })
      let tw5 = TweenMax.to(this.$refs.waveTitltBg, 0.3, {
        opacity: 1,
        scaleX: 1
      })
      let tw6 = TweenMax.to(this, 0.8, {
        num:()=> _this.waveData.value,
        roundProps: ['num']
      })
      tl.addLabel('start')
        .add(tw1, 'start+=0')
        .add(tw2, 'start+=0.2')
        .add(tw3, 'start+=0.4')
        .add(tw6, 'start+=0.5')
        .add(tw4, 'start+=0.5')
        // .add(this.setChartData, 'start+=0.5')
        .add(tw5, 'start+=0.6')
      
      setTimeout(() => {
        this.setChartData()
      }, 1000)
      return tl
    },
    setChartData() {
      const { percent, colors } = this.waveData
      let data = [],
        len = 0
      if (colors && Array.isArray(colors)) {
        len = colors.length
        for (let i = 0; i < len; i++) {
          let value = 0
          if (i === len - 1) {
            value = percent
          } else {
            value = percent + (len - i) * 0.05
          }
          data.push({
            value,
            itemStyle: {
              opacity: 0.8,
              // color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
              //   {
              //     offset: 0,
              //     color: colors[i]
              //   },
              //   {
              //     offset: 1,
              //     color: 'transparent'
              //   }
              // ])
              color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [{
                        offset: 0, color: colors[i] // 0% 处的颜色
                    }, {
                        offset: 1, color: 'transparent' // 100% 处的颜色
                    }],
                    global: false // 缺省为 false
                }
            }
          })
        }
      } else {
        data.push({
          value,
          itemStyle: {
            opacity: 0.8
          }
        })
      }
      this.option.series[0].data = data
      this.chart.setOption(this.option)
    },
    initOption() {
      this.chart = this.$echarts.init(this.$refs.chart)

      let option = {
        series: [
          {
            name: 'liquidFill',
            type: 'liquidFill',
            color: ['#294D99', '#156ACF', '#1598ED', '#45BDFF'],
            data: [],
            radius: '180%',
            shape:
              'path://M33.7,5.8L33.7,5.8c15.5,0,28.1,12.6,28.1,28.1v64.3c0,15.5-12.6,28.1-28.1,28.1l0,0  c-15.5,0-28.1-12.6-28.1-28.1V33.9C5.5,18.4,18.1,5.8,33.7,5.8z',
            phase: 0,
            center: ['50%', '50%'],
            waveAnimation: true,
            animationEasing: 'quadraticInOut',
            // animationEasingUpdate: 2,
            // waveLength: '50%',
            phase: Math.PI / 6,
            outline: {
              show: true,
              borderDistance: 1,
              itemStyle: {
                // color: '',
                borderColor: '#2490e5',
                borderWidth: 1
              }
            },
            backgroundStyle: {
              color: 'transparent'
            },
            borderColor: 'red',
            color: 'yellow',
            itemStyle: {
              opacity: 0.8
            },
            label: {
              show: false,
              color: 'blue',
              insideColor: 'transparent',
              fontWeight: 'bold',
              fontSize: 20,
              align: 'center',
              baseline: 'middle',
              position: 'inside'
            },
            emphasis: {
              itemStyle: {
                opacity: 0.8
              }
            }
          }
        ]
      }
      this.option = option
    }
  }
}
</script>
<style lang="scss" scoped>
.wave-wrap {
  width: 90px;
  height: 220px;

  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  .wave-box-outer-bd {
    height: calc(100% - 27px);
    padding: 5px;

    background: linear-gradient(90deg, #00f7fa 2px, transparent 0) no-repeat,
      linear-gradient(90deg, #031c45 20px, transparent 0) no-repeat,
      linear-gradient(270deg, #00f7fa 2px, transparent 0) no-repeat,
      linear-gradient(270deg, #031c45 20px, transparent 0) no-repeat,
      linear-gradient(270deg, #00f7fa 2px, transparent 0) no-repeat bottom right,
      linear-gradient(270deg, #031c45 20px, transparent 0) no-repeat bottom
        right,
      linear-gradient(90deg, #00f7fa 2px, transparent 0) no-repeat bottom left,
      linear-gradient(90deg, #031c45 20px, transparent 0) no-repeat bottom left,
      linear-gradient(90deg, #031c45 1px, transparent 0) no-repeat,
      linear-gradient(270deg, #031c45 1px, transparent 0) no-repeat;
    background-size: 100% 2px, 100% 2px, 100% 2px, 100% 2px, 100% 2px, 100% 2px,
      100% 2px, 100% 2px, 100% 100%, 100% 100%;

    opacity: 0;

    transform: scaleY(0);
    .wave-box-inner-bd {
      width: calc(100% - 0px);
      height: calc(100% - 0px);
      padding-top: 5px;

      background: linear-gradient(90deg, #00f6fa66 1px, transparent 0) no-repeat,
        linear-gradient(270deg, #00f7fa66 1px, transparent 0) no-repeat;

      opacity: 0;

      transform: scaleY(0);
    }
    .wave-value {
      display: flex;
      align-items: center;
      justify-content: center;

      position: relative;

      height: 24px;
      margin: 4px 18px;

      color: #fff;
      background: #00f6fa33;

      opacity: 0;
      text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7), 1px 1px 6px #00f6fa90,
        1px -1px 6px #00f7fa90, -1px 1px 4px #00f7fa90, -1px -1px 6px #00f7fa90;

      text-align: center;

      transform: scaleX(0);
      &:before,
      &:after {
        display: block;

        position: absolute;
        top: -4px;

        width: 10px;
        height: 32px;

        background: linear-gradient(#00f6fa 2px, transparent 0),
          linear-gradient(0deg, #00f6fa 2px, transparent 0);

        content: '';
      }
      &:before {
        left: -6px;
      }
      &:after {
        right: -6px;
      }
      .wave-unit {
        padding-left: 2px;

        font-family: Arial, Helvetica, sans-serif !important;
        font-size: 12px;
      }
    }
    .wave-bd {
      width: 67px;
      height: 132px;
      margin: 10px auto 0;
      border: 1px solid #0355d8;
      border-radius: 33px 33px;

      opacity: 0;
    }
  }
  .wave-title-bg {
    position: relative;

    margin-top: 5px;
    padding: 2px 3px;

    background: linear-gradient(90deg, #00f6fa58, transparent) no-repeat
        content-box,
      linear-gradient(#005cf01a, #005cf01a);

    opacity: 0;

    transform: scaleX(0);
    &:after,
    &:before {
      display: block;

      position: absolute;
      top: 0;

      width: 5px;
      height: 22px;

      content: '';
    }
    &:after {
      right: 0;

      border: 1px solid #00f7fa;
      border-left: none;
    }
    &:before {
      left: 0;

      border: 1px solid #00f7fa;
      border-right: none;
    }
    .wave-name {
      color: rgba(255, 255, 255, 0.6);

      text-align: center;
    }
  }
}
</style>